<template>
	<view>
		<view class="bgimg">
			<view class="header"><image src="../images/cha.png" mode=""></image></view>
			<view class="title dflex flexc">
				<view style="font-size: 50rpx;" class="fw900">忘记密码</view>
				<image src="../../pagesA/images/lines.png" class="mt14 ml26"></image>
			</view>
		</view>
		<!-- 输入框部分 -->

		<view>
			<!-- 手机号 -->
			<view style="width: 670rpx;" class="auto">
				<u--input
					placeholder="请输入手机号"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
			</view>
			<!-- 请输入验证码 -->
			<view style="width: 670rpx;margin-top: 60rpx;" class="auto dflex alc">
				<u--input
					placeholder="请输入验证码"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
				<view style="color: #4151DB;right: 50rpx" class="posia z-999">获取验证码</view>
			</view>
			<!-- 密码 -->
			<view style="width: 670rpx;" class="auto mt60 dflex alc">
				<u--input
					placeholder="请设置密码"
					border="bottom"
					:type="eyesType"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
				<image
					@click="changeType"
					src="../images/eyes.png"
					class="posia eyes"
					v-if="eyesType == 'password'"
				></image>
				<image
					@click="changeType"
					src="../images/eyes2.png"
					class="posia eyes"
					v-if="eyesType == 'text'"
				></image>
			</view>
			<!-- 登录按钮 -->
			<view class="loginbtn textc fw900 auto">找回密码</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			eyesType: 'password'
		};
	},
	methods: {
		changeType() {
			console.log(123);
			if (this.eyesType == 'password') {
				this.eyesType = 'text';
			} else if (this.eyesType == 'text') {
				this.eyesType = 'password';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bgimg {
	background-image: url('../images/loginbg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 750rpx;
	height: 478rpx;
	overflow: hidden;
}
.header {
	image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 148rpx;
		margin-left: 50rpx;
	}
}
.title {
	margin-top: 90rpx;
	margin-left: 50rpx;
	color: #333;
	image {
		width: 52rpx;
		height: 10rpx;
	}
}
.eyes {
	width: 40rpx;
	height: 40rpx;
	right: 50rpx;
	z-index: 999;
}
.loginbtn {
	width: 670rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: #fff;
	border-radius: 50rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	margin-top: 200rpx;
}
</style>
